<script setup lang="ts">
import { ref, toRaw } from 'vue'
import { ChevronRight } from 'lucide-vue-next'
import {
  TreeItem,
  TreeRoot,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport
} from 'radix-vue'
import { Icon } from '@iconify/vue'
import { IOutputItem } from '@/lib/types'
import { isArray } from 'lodash'
const { data } = defineProps(['data' as any])
const emits = defineEmits(['update:selectedNodePath','update:prefix'])
const selectedNodePath = ref()
const handleTreeToggle = (item:any,Opitons:any,groupName:string) => {
  const label = item._id
  const HasOutProperty = Opitons.some(item=>item.hasOwnProperty('children'))
  // const OupPutOptions = HasOutProperty?Opitons.unshift({label:'output',value:'output'}):Opitons
  const path = handleSetPath([...toRaw(Opitons)], label)
  console.log(Opitons,'OpitonsOpitonsOpitons')
  selectedNodePath.value = !isArray(path) ? path : path.join('.')
  
  const index = Opitons.findIndex(item=>item.value == selectedNodePath.value)
  // HasOutProperty?'output':
  const targetArr = {
    label: `${groupName}-${selectedNodePath.value}`,
    value: `${selectedNodePath.value}`,
    id:`${groupName}-${index}`,
  }
  // emits('update:prefix',groupName);
  emits('update:selectedNodePath', targetArr)
}
const handleSetPath = (nodes: any, leafLabel: string, path: string[] = []): string[] | null => {
  for (const node of nodes) {
    const currentPath = [...path, node.label]
    if (node.label === leafLabel) {
      return currentPath
    }
    if (node.children) {
      const result = handleSetPath(node.children, leafLabel, currentPath)
      if (result) {
        return result
      }
    }
  }
  return null
}
const result = [];
function extractLabelsWithChildren(node, result = []) {
  // 如果存在 children 属性，则将当前节点的 label 添加到结果数组中
  isArray(node)&&node.map(el=>{
  if (el.children) {
    result.push(el.label);
    // 递归遍历 children 数组中的每个节点
      extractLabelsWithChildren(el.children, result);
  }
})
  return result;
}
</script>

<template>
  <ul class="bg-base-100  list-none">
    <li
      v-for="(el, index) in data"
      :key="index"
      class="group relative mt-2 flex items-center justify-between overflow-visible rounded-sm p-2 text-sm text-gray-500 hover:bg-gray-100"
    >
      <p>{{ el.groupName }}</p>
      <ChevronRight size="16px" />
      <div class="treeBox absolute hidden group-hover:block  p-1">
        <div class="flex items-center justify-center rounded-sm">
          <TreeRoot
            v-slot="{ flattenItems }"
            class="w-full max-h-72 overflow-scroll text-blackA11 select-none list-none rounded-lg bg-gray-50 p-2 text-sm font-medium"
            :items="el.Options"
            :get-key="(item) => item.label"
            :default-expanded="extractLabelsWithChildren(el.Options,result)"
          >
            <TreeItem
              v-for="item in flattenItems"
              v-slot="{ isExpanded }"
              :key="item._id"
              :style="{ 'padding-left': `${item.level - 0.5}rem` }"
              v-bind="item.bind"
              @toggle="()=>handleTreeToggle(item,el.Options,el.groupName)"
              class="focus:ring-grass8 data-[selected]:bg-grass4 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
            >
              <template v-if="item.hasChildren">
                <Icon v-if="!isExpanded" icon="lucide:folder" class="h-4 w-4 text-gray-500" />
                <Icon v-else icon="lucide:folder-open" class="h-4 w-4 text-gray-500" />
              </template>
              <Icon v-else :icon="item.value.icon || 'lucide:file'" class="h-4 w-4 text-gray-500" />
              <div class="pl-2 text-gray-500" >
                {{ item.value.label }}
              </div>
            </TreeItem>
          </TreeRoot>
        </div>
      </div>
    </li>
  </ul>
</template>

<style lang="scss">
.treeBox {
  display: none;
  position: fixed;
  right: 0;
  transform: translateX(96%);
  z-index: 99999;
}
</style>
